<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core">
  
    <body>

        <ui:composition template="./../Plantillas/template.xhtml">

            <ui:define name="title">
                ${loginBean.usuario} - RallDrive
            </ui:define>

            <ui:define name="left">
                <h:form id="formPanelControl">
                    <p:panel id="pnlPanelControl" header="${loginBean.usuario}">
                        <p:menu id="mnPanelControl">
                            <p:menuitem value="Configuración de cuenta" icon="ui-icon-folder"/>
                            <p:menuitem value="Cambiar contraseña" icon="ui-icon-folder"/>
                            <p:menuitem value="Cerrar sesión" icon="ui-icon-folder"/>
                        </p:menu>
                    </p:panel>
                </h:form>
                <h:form id="formNodos">
                    <p:panel id="pnlNodos" header="Mi RallDrive">
                        <p:tree id="arbolCarpetas" value="${loginBean.root}"  
                            var="carpeta" selectionMode="single"
                            selection="${loginBean.selectedNode}">
                            <p:ajax event="select" listener="${loginBean.onNodeSelect}"
                                update="_carpetaPanel"/>

                            <p:treeNode expandedIcon="ui-icon-folder-open"
                                collapsedIcon="ui-icon-folder-collapsed">
                                <h:outputText value="${carpeta.nombre}"/>
                            </p:treeNode>
                            <p:treeNode type="image" icon="ui-icon-folder">
                                <h:outputText value="${carpeta.nombre}"/>
                            </p:treeNode>
                        </p:tree>
                    </p:panel>
                </h:form>
            </ui:define>

            <ui:define name="content">
                <p:panel id="carpetaPanel" header="${loginBean.selectedNode.data.nombre}">
                    <p:growl id="grwErrores"/>
                    <h:form id="formUpload">
                        <p:fileUpload id="fileUpload" fileUploadListener="${loginBean.upload}" multiple="true"
                           sizeLimit="10000000" invalidFileMessage="fichero inválido" invalidSizeMessage="ha excedido el tamaño máximo permitido"
                           label="Seleccionar archivo" cancelLabel="Cancelar" uploadLabel="Subir" update="_carpetaPanel">
                        </p:fileUpload>
                    </h:form>
                    
                    <h:form id="formControles">
                        <p:dialog widgetVar="crearCarpetaDialog" modal="true" header="Nombre de Carpeta">
                            <p:inputText id="carpetaNueva" label="Carpeta Nueva" value="${loginBean.nuevaCarpeta}">
                                <f:validateLength minimum="1" />  
                            </p:inputText>
                            <p:commandButton id="btnCrearCarpeta" update="_formNodos_arbolCarpetas, _carpetaPanel" value="Crear" action="${loginBean.crearCarpeta}"/>
                        </p:dialog>
                        <p:commandButton value="Crear Carpeta" onclick="crearCarpetaDialog.show()"/>  
                        <p:commandButton id="btnSubirCarpeta" action="${loginBean.subirCarpeta}" update="_formNodos_arbolCarpetas, _carpetaPanel" icon="ui-icon-arrowreturnthick-1-n" />
                    </h:form>
                    
                    <h:form id="formHome" enctype="multipart/form-data">       
                        <p:dialog widgetVar="opcionesDialog" modal="true" header="Elegir una acción" width="280px" height="150px">
                            <p:menu id="mnOpciones">
                                <p:menuitem icon="ui-icon-disk" value="Descargar" ajax="false" actionListener="${loginBean.download(loginBean.selectedRow)}">
                                    <p:fileDownload value="${loginBean.file}" />
                                </p:menuitem>
                                <p:menuitem icon="ui-icon-search" value="Mostrar" outcome="${loginBean.mostrar(loginBean.selectedRow)}" target="_blank"/>
                                <p:menuitem icon="ui-icon-close" value="Eliminar" url="http://prototypejs.org"/>
                            </p:menu>
                        </p:dialog>
                        
                        <p:dataTable id="tablaRecursos" value="${loginBean.recursos}" 
                            var="recurso" selectionMode="single" rowKey="${recurso.id}"
                            selection="${loginBean.selectedRow}" scrollable="true"
                            scrollHeight="250" emptyMessage="Carpeta Vacia">
                             
                            <p:ajax event="rowSelect" listener="${loginBean.onRowSelect}"
                                update="_carpetaPanel" />
                            
                            <p:column headerText="Nombre" filterBy="${recurso.nombre}">  
                                <h:outputText value="${recurso.nombre}" />
                            </p:column>
                            
                            <p:column headerText="Fecha" filterBy="${recurso.fecha}">
                                <h:outputText value="${recurso.fecha}">
                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                </h:outputText>
                            </p:column>
                            
                            <f:facet name="footer">  
                                <p:commandButton icon="ui-icon-search" oncomplete="opcionesDialog.show()"/>
                            </f:facet>  
                         </p:dataTable>
                    </h:form>
                </p:panel>
            </ui:define>
            
        </ui:composition>
    </body>
</html>
